<template>
  <div class="app-container">

    <!-- 添加或修改话框 -->
    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body center :before-close="handleCancel"
               :show-close="false"
               :close-on-press-escape="false"
               :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :class=" !openIsEdit?'noEidt':'' "
               v-loading="submitLoading">
        <el-input v-model="form.pkId" :readonly="true" type="hidden" />

        <el-row :gutter="5">
          <el-col :span="24">
            <el-form-item label="业主信息" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24">
            <el-container>
              <el-main class="grop-item-main">
                <el-col :span="12">
                  <el-form-item label="业主姓名:" prop="cus.cusName">
                    <el-input v-model="form.cus.cusName" :readonly="!openIsEdit" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别" prop="cusGender">
                    <template v-if="openIsEdit">
                      <el-radio v-model="form.cus.cusGender" label="1">先生</el-radio>
                      <el-radio v-model="form.cus.cusGender" label="2">女士</el-radio>
                    </template>
                    <template v-if="!openIsEdit">
                      <span v-if="form.cus.cusGender==1">先生</span>
                      <span v-else>女士</span>
                    </template>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-col :span="12">
                    <el-form-item label="联系电话" prop="cus.cusMobileNo">
                      <el-input v-model="form.cus.cusMobileNo" :readonly="!openIsEdit" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="三供一业小区" prop="isTriSvcComm">
                      <template v-if="openIsEdit">
                        <el-radio v-model="form.cus.isTriSvcComm" label="1">是</el-radio>
                        <el-radio v-model="form.cus.isTriSvcComm" label="0">否</el-radio>
                      </template>
                      <template v-if="!openIsEdit">
                        <span v-if="form.cus.isTriSvcComm==1">是</span>
                        <span v-else>否</span>
                      </template>
                    </el-form-item>
                  </el-col>


                </el-col>
                <el-col :span="24">
                  <el-form-item label="业主地址" prop="cusAddress">
                    <!--                    <el-col :span="4">
                                          <el-input v-model="form.cus.cusProv" :readonly="true"/>
                                        </el-col>
                                        <el-col :span="4">
                                          <el-input v-model="form.cus.cusCity" :readonly="true"/>
                                        </el-col>-->
                    <el-col :span="6">
                      <el-select v-model="form.cus.cusDistCode"
                                 ref="distSelRef"
                                 :disabled="!openIsEdit"
                                 clearable filterable placeholder="请选择区"
                                 @change="handleChangeDist">
                        <el-option
                            v-for="item in distOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="8">
                      <el-input v-model="form.cus.cusComm" :readonly="!openIsEdit" placeholder="小区"></el-input>
                    </el-col>
                    <el-col :span="10">
                      <el-input v-model="form.cus.cusAddress" :readonly="!openIsEdit" placeholder="具体地址" />
                    </el-col>
                  </el-form-item>
                </el-col>
              </el-main>
            </el-container>
          </el-col>

        </el-row>
        <el-row :gutter="5">
          <el-col :span="24">
            <el-form-item label="主诉人信息" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24">
            <el-container>
              <el-main class="grop-item-main">
                <el-col :span="12">
                  <el-form-item label="主诉人姓名:" prop="repr.reprName">
                    <el-input v-model="form.repr.reprName" :readonly="!openIsEdit" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别" prop="reprGender">
                    <template v-if="openIsEdit">
                      <el-radio v-model="form.repr.reprGender" label="1">先生</el-radio>
                      <el-radio v-model="form.repr.reprGender" label="2">女士</el-radio>
                    </template>
                    <template v-if="!openIsEdit">
                      <span v-if="form.repr.reprGender==1">先生</span>
                      <span v-else>女士</span>
                    </template>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="主诉人电话" prop="repr.reprMobileNo">
                    <el-input v-model="form.repr.reprMobileNo" :readonly="!openIsEdit" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-col :span="12">
                    <el-form-item label="主诉人其他" prop="repr.reprCallCount">
                      <el-input v-model="form.repr.reprCallCount" :readonly="!openIsEdit"
                                placeholder="电话沟通次数（4158850）" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="" prop="repr.reprCompCount" label-width="0px">
                      <el-input v-model="form.repr.reprCompCount" :readonly="!openIsEdit" placeholder="投诉次数（12345）" />
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-main>
            </el-container>
          </el-col>

        </el-row>

        <el-row :gutter="5">
          <el-col :span="24">
            <el-form-item label="服务信息" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24">
            <el-container>
              <el-main class="grop-item-main">
                <el-col :span="24">
                  <el-form-item label="工单来源:" prop="workOrigin">
                    <el-select v-model="form.origin" placeholder="选中来源"
                               clearable
                               :disabled="!openIsEdit">
                      <el-option v-for="(item ,index) in originList"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="工单类型" prop="issueCatIds">
                    <!--props 实现 指定选项的值为选项对象的某个属性值-->
                    <!-- :props="{ value: 'pkId', label: 'catName', children: 'children' }"-->
                    <el-cascader style="width:100%" v-if="isSelectIssCat"
                                 ref="issCatOptionsRef"
                                 v-model="selIssCatArry"
                                 :options="issCatOptions"
                                 :disabled="!openIsEdit"
                                 @change="handleChangeIssCat" clearable filterable placeholder="工单类型"></el-cascader>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="截止时间" prop="dueTime">
                    <el-date-picker :readonly="!openIsEdit"
                                    v-model="form.dueTime"
                                    type="datetime"
                                    placeholder="选择截止时间"
                                    @change="handleDateChange"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="工单问题" prop="issue">
                    <el-input v-model="form.issue" :readonly="!openIsEdit"
                              placeholder="输入问题"
                              type="textarea"
                              :rows="2" />
                  </el-form-item>
                </el-col>
              </el-main>
            </el-container>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="24">
            <el-form-item label="工单备注" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24">
            <el-container>
              <el-main class="grop-item-main">
                <el-col :span="24">
                  <el-form-item label="是否回访" prop="isRevisit">
                    <template v-if="openIsEdit">
                      <el-radio v-model="form.isRevisit" label="1">是</el-radio>
                      <el-radio v-model="form.isRevisit" label="0">否</el-radio>
                    </template>
                    <template v-if="!openIsEdit">
                      <span v-if="form.isRevisit==1">是</span>
                      <span v-else>否</span>
                    </template>
                  </el-form-item>
                </el-col>
              </el-main>
            </el-container>
          </el-col>
        </el-row>

        <el-row :gutter="5" id="assgnRowRef">
          <!--          <el-col :span="24" >
                      <el-form-item label="分配工单" class="group-title"></el-form-item>
                    </el-col>-->
          <el-col :span="24">
            <el-container>
              <!--              <el-main class="grop-item-main">-->
              <el-col :span="24">
                <el-form-item label="接单公司" prop="assgnDeptIds">
                  <treeselect v-if="!openIsAssign"
                              v-model="form.assgnDeptIds" :options="deptOptions" :show-count="true"
                              placeholder="选择所属公司" :disabled="!openIsEdit"
                              :zIndex="9999"
                              @select="handleSelectDeptTree"
                  />
                  <treeselect v-else
                              v-model="form.assgnDeptIds" :options="deptOptions" :show-count="true"
                              placeholder="选择所属公司"
                              :zIndex="9999"
                              @select="handleSelectDeptTree"
                  />
                  <!--                    <el-cascader style="width:100%" v-if="isSelDeptOptions"
                                                   ref="deptOptionsRef"
                                                   v-model="selDeptArry"
                                                   :options="deptOptions"
                                                   :disabled="!openIsEdit"
                                                   @change="handleChangeDeptOptions" clearable filterable  placeholder="选择所属公司"></el-cascader>-->
                </el-form-item>
              </el-col>
              <!--              </el-main>-->
            </el-container>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="openIsEdit" type="primary" @click="onSubmit()" :loading="submitLoading">提 交</el-button>
        <el-button @click="handleCancel" :loading="submitLoading">关 闭</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import "@/style/customer.scss";
import { getTree as getWkoIssCatTree } from "@/api/wkorder/wkoIssCat.js";
import { getDistListByCityCode } from "@/api//pub/pubRegion";
import { updateWkOrder, listOrder, getOrderById } from '@/api/wkorder/wkorder.js';
import { getTree as getDetpTree } from '@/api/system/dept.js';

import { deptCompTreeCurUser } from "@/api/system/user";


import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import { getToken } from '@/utils/auth'

export default {

  name: "Wkorder_list", //此name需要和func表的func_path匹配，否则再次回到已打开的此页面时，会触发页面刷新（如：页签切换）
  components: { Treeselect },
  data () {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createdDateStr: undefined,//下单时间
        origId: undefined,
        origin: undefined,
        cusComm: undefined,
        issueCatIds: undefined,
        createUserRealName: undefined,
        createUserCompName: undefined,
        isRevisit: undefined,
        isTriSvcComm: undefined,
        orderStatus: undefined
      },
      // 总条数
      total: 0,
      // 表格数据
      orderList: [],
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //是否打开编辑
      openIsEdit: false,
      //是否执行分配
      openIsAssign: false,
      form: {
        pkId: undefined,
        origId: undefined,
        cus: {
          cusName: "",
          cusGender: '1',
          cusMobileNo: "",
          isTriSvcComm: '0',
          cusProv: '山西省',
          cusProvCode: '140000',
          cusCity: "太原市",
          cusCityCode: "140100",
          cusDist: "",
          cusDistCode: "",
          cusComm: "",
          cusAddress: "",
        },
        repr: {
          reprName: "",
          reprGender: "1",
          reprMobileNo: "",
          reprCallCount: "",
          reprCompCount: "",
        },
        origin: "",
        issueCatIds: undefined,//issCat:[10,1001,100101]
        issueCatNames: undefined,
        dueTime: "",
        issue: "",
        isRevisit: "0",
        assgnDeptIds: undefined,
        assgnUserDeptNames: undefined,
      },
      distOptions: [],
      logicList: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "0",
          label: "否"
        },
      ],
      originList: [
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "GOV",
          label: "12345"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "OPSPL",
          label: "运管平台"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "CALL",
          label: "热线电话"
        },
      ],
      orderStatusList: [
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "PEND",
          label: "待分配"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "ASSN",
          label: "已分配"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "AWAIT",
          label: "待上门"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "DONE",
          label: "已完成"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "COMM",
          label: "沟通解决"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "TIME",
          label: "已超时"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "RTN",
          label: "撤回工单"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "CNCL",
          label: "撤销工单"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "COMP",
          label: "公司完成"
        },
      ],
      issCatOptions: [],//工单类型
      selIssCatArry: [],//选中的工单类型
      isSelectIssCat: true,// 用于控制el-cascader 的dom 强制刷新，解决 设置默认值后，改为其他值再改回来时，绑定数据没有发生变化
      deptOptions: undefined,//部门
      isSelDeptOptions: true,
      selDeptArry: [],
      submitLoading: false,
      // 表单校验
      rules: {
        /*'repr.reprName':  [
          {
            validator:(rule, value, callback)=>{
              if(!value){
                callback(new Error("主诉人姓名不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '主诉人姓名不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required: true }
        ],*/
        'repr.reprMobileNo': [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("主诉人电话不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '主诉人电话不能为空'
                });
              } else {
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur", required: true
          }
          /*{
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
            required: true
          }*/
        ],
        'repr.reprCallCount': [
          {
            validator: (rule, value, callback) => {
              if (value && !(/^-?\d+$/.test(value))) {
                callback(new Error("电话沟通次数必须为数字值"))
                this.$notify.error({
                  title: '错误',
                  message: '电话沟通次数必须为数字值'
                });
              } else {
                callback(); //成功后不传入错误参数即可
              }
            },
            trigger: ["blur"] //trigger: ["blur", "change"]
          }
        ],
        'repr.reprCompCount': [
          {
            validator: (rule, value, callback) => {
              if (value && !(/^-?\d+$/.test(value))) {
                callback(new Error("投诉次数必须为数字值"))
                this.$notify.error({
                  title: '错误',
                  message: '投诉次数必须为数字值'
                });
              } else {
                callback(); //成功后不传入错误参数即可
              }
            },
            trigger: ["blur"] //trigger: ["blur", "change"]
          }
        ],
      }
    }
  },
  created () {
    debugger;

    // 假设URL是：http://example.com/?name=John&age=30
    const query = new URLSearchParams(decodeURI(window.location.search));

    let accessToken = getToken();
    /*if(!accessToken){

    }
    setToken(accessToken)*/

    // 客服系统业务主键
    this.form.origId = query.get('origId') || '';
    this.form.cus.cusName = query.get('cusName') || '';
    this.form.cus.cusGender = query.get('cusGender') || '';
    this.form.cus.cusMobileNo = query.get('cusMobileNo') || '';
    this.form.cus.isTriSvcComm = query.get('isTriSvcComm') || '';

    this.form.cus.cusComm = query.get('cusComm') || '';
    this.form.cus.cusAddress = query.get('cusAddress') || '';

    this.form.repr.reprName = query.get('reprName') || '';
    this.form.repr.reprGender = query.get('reprGender') || '';
    this.form.repr.reprMobileNo = query.get('reprMobileNo') || '';
    this.form.repr.reprCallCount = query.get('reprCallCount') || '';
    this.form.repr.reprCompCount = query.get('reprCompCount') || '';

    this.form.origin = 'CALL';
    this.form.dueTime = query.get('dueTime') || '';
    this.form.issue = query.get('issue') || '';

    this.form.isRevisit = query.get('isRevisit') || '';


    this.onInitIssCatTree();
    this.onInitDistOptions();
    this.onInitDetpOptions();

    this.open = true;
    this.openIsEdit = true;
  },
  methods: {

    getList () {
      this.loading = true;
      listOrder(this.queryParams).then((res) => {
        this.orderList = res.data;
        this.total = Number(res.total);
      }).finally(() => {
        this.loading = false;
        //放在list查询之后，防止并发执行

      });
      ;
    },

    /**
     * 初始化 区县 select
     */
    onInitDistOptions () {
      getDistListByCityCode(this.form.cus.cusCityCode).then((res) => {
        debugger;
        this.distOptions = []
        let list = res.data;
        for (let i = 0; i < list.length; i++) {
          let obj = list[i]
          let item = {
            value: obj.adCode,
            label: obj.adName
          }
          this.distOptions.push(item);
        }

      })
    },
    /**
     * 初始化 问题分类 树
     */
    onInitIssCatTree () {
      getWkoIssCatTree().then((res) => {
        let issCatList = res.data;
        // 通过props 实现 就可以不用转换
        // 我之所以要转换 是因为 返回的对象中children 没有数据时 不是一个空对象，这样的就会显示一个空的叶子节点
        this.issCatOptions = this.onWkoIssCatTreeTran(res.data)

      })
    },

    /**
     * 初始化部门树
     */
    onInitDetpOptions () {
      /*getDetpTree().then( (res)=>{
        let deptTreeList= res.data;
        this.deptOptions=this.onDeptTreeTran(deptTreeList);
      })*/
      deptCompTreeCurUser().then(response => {
        debugger;
        this.deptOptions = response.data;
      });
    },
    onDeptTreeTran (deptTreeList) {
      let options = [];
      for (let i = 0; i < deptTreeList.length; i++) {
        let obj = deptTreeList[i]

        let item = {
          value: obj.pkId,
          label: obj.deptName
        }

        if (obj.children.length > 0) {
          let child = [] = this.onDeptTreeTran(obj.children)
          item.children = child;
        }
        options.push(item)
      }
      return options;
    },

    onWkoIssCatTreeTran (issCatList) {
      let issCatOptions = [];
      for (let i = 0; i < issCatList.length; i++) {
        let obj = issCatList[i]

        let item = {
          value: obj.pkId,
          label: obj.catName
        }

        if (obj.children.length > 0) {
          let child = [] = this.onWkoIssCatTreeTran(obj.children)
          item.children = child;
        }
        issCatOptions.push(item)
      }
      return issCatOptions;
    },

    // 表单重置
    reset () {
      /*this.form = {
        prodImg:undefined,
        cateItemValues:[],
        districtValues:[],
        projValuesAry:[],
        urgentStatus:0,
        prodNum:undefined,
        workPrice:undefined
      };*/
      this.form = this.$options.data().form
      this.selIssCatArry = this.$options.data().selIssCatArry
      this.selDeptArry = this.$options.data().selDeptArry
      this.resetForm("form");
    },

    /** 新增按钮操作 */
    handleAdd () {
      this.reset();
      this.open = true;
      this.openIsEdit = true;
      this.title = "新增";
      //this.selIssCatArry=['10','1001','100101'] //默认值需要设置为字符串


    },

    handleChangeDist (value) {
      debugger;
      console.log("选中的值：", value);
      let label = this.$refs.distSelRef.selected.label;
      this.form.cus.cusDist = label;
      //let value= this.$refs.distSelRef.selected.value;
    },
    handleChangeIssCat (value) {
      debugger;
      this.isSelectIssCat = false;
      if (!!value && value.length > 0) {
        let issCat = []
        for (let i in value) {
          issCat.push(value[i])
        }
        this.selIssCatArry = issCat
        this.form.issueCatIds = this.selIssCatArry.join(',');
        let nodesInfo = this.$refs[`issCatOptionsRef`].panel.getNodeByValue(value)
        if (nodesInfo && nodesInfo.pathLabels && nodesInfo.pathLabels.length > 0) {
          this.form.issueCatNames = nodesInfo.pathLabels.join(',');
        }
      } else {
        this.form.issueCatIds = undefined;
        this.form.issueCatNames = undefined;
      }
      debugger;
      this.isSelectIssCat = true;
    },
    handleChangeDeptOptions (value) {
      debugger;
      this.isSelDeptOptions = false;
      if (!!value && value.length > 0) {
        let depts = []
        for (let i in value) {
          depts.push(value[i])
        }
        this.selDeptArry = depts
        this.form.assgnDeptIds = this.selDeptArry.join(',');
        let nodesInfo = this.$refs[`deptOptionsRef`].panel.getNodeByValue(value)
        if (nodesInfo && nodesInfo.pathLabels && nodesInfo.pathLabels.length > 0) {
          this.form.assgnUserDeptNames = nodesInfo.pathLabels.join(',');
        }
      } else {
        this.form.assgnDeptId = undefined;
        this.form.assgnUserDeptName = undefined;
      }
      this.isSelDeptOptions = true;
    },

    handleSelectDeptTree (node) {
      debugger;
      this.form.assgnUserDeptNames = node.label
    },
    /*handleClearDeptTree(){
      debugger;
      this.form.assgnUserDeptNames=undefined;
    },
*/
    // 取消按钮
    handleCancel () {
      debugger;
      this.open = false;
      this.reset();
      window.close();
    },

    handleChangeCreatedDate (value) {
      debugger;
      console.log(value)
    },
    handleChangeQueryIssCat (value) {
      if (!!value && value.length > 0) {
        let issCat = []
        for (let i in value) {
          issCat.push(value[i])
        }
        this.queryParams.issueCatIds = issCat.join(',');
      } else {
        this.queryParams.issueCatIds = undefined;
      }
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery () {
      this.resetForm("queryForm");
      //this.handleQuery();
    },

    handleDateChange (value) {
      debugger;
      if (value) {
        this.form.dueTime = this.formatDate(value);
      }
    },
    formatDate (date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    // 更多操作触发
    handleCommand (command, row) {
      switch (command) {
        case "openSelectWorker":
          this.openSelectWorker(row);
          break;
        case "handleUpdate":
          this.handleUpdate(row);
          break;
        case "handleAssign":
          this.handleAssign(row);
          break;
        case "handlePfmRemark":
          this.handlePfmRemark(row);
          break;
        case "handleClose":
          this.handleClose(row);
          break;
        default:
          break;
      }
    },
    /**
     * 详情按钮
     * @param row
     */
    handlePreview (row) {
      this.openIsEdit = false;
      this.getFormData(row);
    },

    handleUpdate (row) {
      this.openIsEdit = true;
      //this.handlePreview(row);
      this.getFormData(row);
    },
    handleAssign (row) {
      this.openIsAssign = true;
      //this.handlePreview(row);
      this.getFormData(row).then(() => {

        this.scrollToAnchor("assgnRowRef");
      });
    },
    scrollToAnchor (anchorRef) {
      this.$nextTick(() => { //确保 DOM 已经完全渲染完毕后再执行滚动操作。
        // 等待对话框渲染后，滚动到锚点
        /*const target = document.getElementById("targetAnchor");
        if (target) {
          target.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到锚点
        }*/
        debugger;
        const targetElement = document.getElementById(anchorRef);
        ;//this.$refs[anchorRef];
        if (targetElement) {
          targetElement.scrollIntoView({
            behavior: 'smooth', // 平滑滚动
            block: 'start' // 对齐到视口的顶部
          });
        } else {
          console.error(`找不到引用为 ${anchorRef} 的元素`);
        }
      });


    },

    /*getFormData(row){
      const pkId=row.pkId;
      getOrderById(pkId).then( (res)=>{
          this.form = res.data;
          this.open = true;
          this.title = "工单信息";
          if(this.form.issueCatIds){
            this.selIssCatArry=this.form.issueCatIds.split(",")
          }
      });
    },*/
    getFormData (row) {
      return new Promise((resolve, reject) => {

        const pkId = row.pkId;
        getOrderById(pkId).then((res) => {
          this.form = res.data;
          this.open = true;
          this.title = "工单信息";
          if (this.form.issueCatIds) {
            this.selIssCatArry = this.form.issueCatIds.split(",")
          }

          resolve()

        });

      })
    },

    onSubmit () {

      let _this = this;
      let data = this.form;
      debugger;
      this.$confirm('确认提交吗？')
          .then(_ => {


            this.$refs["form"].validate(valid => {
              if (!valid) {
                return;
              }

              this.submitLoading = true;

              if (!this.form.assgnDeptIds) {//部门组件清除后，没有清除名称
                this.form.assgnUserDeptNames = undefined;
              }

              let data = this.form;

              debugger;
              updateWkOrder(data).then(response => {
                this.$alert("操作成功");
                this.handleCancel();
              }).finally(() => {
                this.submitLoading = false;
              });
            })


          })
          .catch(_ => {});
    }
  }
}

</script>
<style lang="scss" scoped>

/***上传**/
::v-deep.thmb-uploader .el-upload {
  border: 1px dashed #D9D9D9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

::v-deep.thmb-uploader .el-upload:hover {
  border-color: #409EFF;
}

.thmb-img {
  width: 100px;
  height: 100px;
  display: block;
}

.thmb-uploader:hover .el-icon-circle-close {
  visibility: visible;
}

.el-icon-circle-close {
  /*display: flex;
  float: right;
  margin-right: 6px;*/
  right: 2px;
  color: #959bcb;
  font-size: 30px;
  visibility: hidden;
  position: absolute;
  z-index: 99;
}

.thmb-img-progress {
  left: 0px;
  //right: 0px;
  //bottom:0px;
  //top:0px;
  position: absolute;
}

.thmb-uploader-icon {
  font-size: 28px;
  color: #8C939D;
  width: 100px;
  height: 100px;
  line-height: 108px;
  text-align: center;
}

</style>
